<template>
  <div>
    <el-form :inline="true" :model="teacherQuery" class="demo-form-inline" style="padding: 10px 0;">
      <el-form-item label="讲师名">
        <el-input v-model="teacherQuery.name" placeholder="讲师名"></el-input>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacherQuery.level" placeholder="讲师头衔">
          <el-option label="未选择" value="null"></el-option>
          <el-option label="高级讲师" value="1"></el-option>
          <el-option label="首席讲师" value="2"></el-option>
        </el-select>
      </el-form-item>

    <el-form-item>
      <!-- <span class="demonstration">默认</span> -->
      <el-date-picker
        v-model="teacherQuery.begin"
        type="datetime"
        placeholder="选择添加时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        default-time="00:00:00">
      </el-date-picker>
    </el-form-item>

    <el-form-item>
      <!-- <span class="demonstration">默认</span> -->
      <el-date-picker
        v-model="teacherQuery.end"
        type="datetime"
        placeholder="选择截至时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        default-time="00:00:00">
      </el-date-picker>
    </el-form-item>
      <el-form-item>
        <el-button type="success" @click="searchData" icon="el-icon-search" :loading=this.loader plain/>
        <el-button type="danger" @click="resetData" icon="el-icon-delete" :loading=this.loader plain/>
      </el-form-item>

    </el-form>

    <el-table :data="list" border style="width: 100%">
      <el-table-column label="序号" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" align="center"/>
      <el-table-column prop="name" label="姓名" align="center"/>
      <el-table-column prop="career" label="资历" align="center"/>
        <el-table-column prop="level" label="头衔" align="center">
          <template slot-scope="scope">
            {{ scope.row.level===1?'高级讲师':'首席讲师' }}
          </template>
        </el-table-column>
      <el-table-column prop="sort" label="排序" align="center"/>
      <el-table-column prop="intro" label="简介" align="center"/>
      <el-table-column prop="gmtCreate" label="添加时间"/>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">

          <!-- <router-link :to="'/edu/teacher/edit'+scope.row.id"> -->
            <el-button type="primary" size="medium" icon="el-icon-edit" @click="getInfoById(scope.row.id)" round/>

            <el-dialog title="修改信息" :visible.sync="updateTeacherForm">

              <el-form :model="form">
                <el-form-item label="id" :label-width="formLabelWidth">
                  <el-input v-model="form.id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="名字" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="简介" :label-width="formLabelWidth">
                  <el-input v-model="form.intro" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="资历" :label-width="formLabelWidth">
                  <el-input v-model="form.career" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="头衔" :label-width="formLabelWidth">
                  <!-- <el-input v-model="form.level" autocomplete="off"></el-input> -->
                  <el-select v-model="form.level" clearable  placeholder="请选择">
                    <el-option :value="1" label="高级讲师"/>
                    <el-option :value="2" label="首席讲师"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="头像" :label-width="formLabelWidth">
                  <el-input v-model="form.avatar" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序" :label-width="formLabelWidth">
                  <el-input v-model="form.sort" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button @click="noUpdateTeacherInfo">取 消</el-button>
              <el-button type="primary" @click="updateTeacherInfo">确 定</el-button>
            </div>

            </el-dialog>
          <!-- </router-link> -->

          &nbsp;
          <el-button type="danger" size="medium" icon="el-icon-delete" @click="removeDataById(scope.row.id)" round/>



        </template>
      </el-table-column>
    </el-table>
    <br/>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page= this.page
        :page-sizes="[5, 10, 15, 20]"
        :page-size=this.limit
        style="padding: 30px 0; text-align: center"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import teacher from '@/api/edu/teacher'

export default {
  data() {
    return {
      level: 1,
      page: 1,
      limit: 5,
      total: 0,
      teacherQuery: {},
      list: null,
      loader: true,
      updateTeacherForm: false,
      form: {},
      formLabelWidth: '120px'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      teacher.getTeacherListPage(this.page, this.limit, this.teacherQuery)
        .then(res => {
          console.log(res)
          this.list = res.data.records
          this.total = res.data.total
          if (this.list) { this.loader = false }
          else { this.loader = true }
          // console.log(this.loader)
        })
    },
    handleSizeChange(val) {
      this.limit = val
      this.getList(this.page, this.limit, this.teacherQuery)
      // console.log(`this.limit: ${this.limit}`)
    },
    handleCurrentChange(val) {
      this.page = val
      this.getList(this.page, this.limit, this.teacherQuery)
      // console.log(`this.page: ${this.page}`)
    },
    searchData() {
      this.getList(this.page, this.limit, this.teacherQuery)
      if (!this.list) { this.loader = true }
      else { this.loader = false }
    },
    resetData() {
      this.teacherQuery = {}
      this.getList(this.page, this.limit, this.teacherQuery)
    },
    removeDataById(id) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          teacher.deleteTeacher(id)
          this.$notify({
            type: 'success',
            message: '删除成功!',
            showClose: false
          })
          this.getList(this.page, this.limit, this.teacherQuery)
        }).catch(() => {
          this.$notify({
            type: 'info',
            message: '已取消删除',
            showClose: false
          })
          this.getList(this.page, this.limit, this.teacherQuery)
        })
      },
      getInfoById(id) {
        teacher.getTeacherById(id, this.teacherQuery)
          .then(res => {
            this.updateTeacherForm = true
            this.form = res.data.teacher
            // console.log(this.form)
          })
      },
      updateTeacherInfo() {
        this.$confirm('此操作将修改该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          teacher.updateTeacher(this.form)
          this.$notify({
            type: 'success',
            message: '修改成功!',
            showClose: false
          })
          this.updateTeacherForm = false
          this.form = {}
          this.getList(this.page, this.limit, this.teacherQuery)
        }).catch(() => {
          this.$notify({
            type: 'info',
            message: '已取消修改',
            showClose: false
          })
          this.updateTeacherForm = false
          this.getList(this.page, this.limit, this.teacherQuery)
          this.form = {}
        })
      },
      noUpdateTeacherInfo() {
        this.$notify({
          type: 'info',
          message: '已取消修改',
            showClose: false
        })
        this.form = {}
        this.updateTeacherForm = false
        this.getList(this.page, this.limit, this.teacherQuery)
      }
  }
}
</script>
